<template>
  <view class="rule">
    <checkbox-group @change="onChange">
      <label>
        <checkbox
          :checked="checked"
          value="rule"
          color="#FFCC33"
          style="transform:scale(0.7)"
        />
          <slot/>
          <text class="rule__protocol"  @tap.stop="handleItemClick">
            《惊喜猫盒用户协议》
          </text>
      </label>
    </checkbox-group>
  </view>
</template>
<script>
export default {
  props: ['checked'],
  methods: {
    handleItemClick () {
      uni.navigateTo({
        url: '/pages/protocol/index'
      })
    },

    onChange (e) {
      this.$emit('change', e.detail.value[0])
    }
  }
}
</script>
<style lang="scss" scoped>
@media (min-aspect-ratio:3/4){
	.rule {display: none;}
}
.rule {
  position: fixed;
  bottom: 100rpx;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  color: #8A6E57;
  font-size: 24rpx;
  &__protocol {
    color: #D46E46;
  }
}
</style>
